import { useState, useRef, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import Navigation from '../../components/Navigation/index.js';
import Rightnav from '../../components/rightnav/rightnav.js';
import PaginationComponent from '../../components/Pagination';
import { allData } from './poster.ts';
import './poster.css';

const Poster = () => {
    const params: any = useParams();
    const param: any = params.param.split(':')[1];

    const [currentData, setCurrentData] = useState<any>([]);
    const [currentPage, setCurrentPage] = useState(1);
    const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
    const [playingIndex, setPlayingIndex] = useState<number | null>(null);

    useEffect(() => {
        const data = allData[param] || { title: 'Not Found', content: 'No data available for this page.' };
        setCurrentData(data.data);
    }, [param]);

    const pageSize = 20;

    const handlePageChange = (pageNumber: number) => {
        setCurrentPage(pageNumber);
    };

    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    const paginatedData = currentData.slice(startIndex, endIndex);

    const handleMouseEnter = (index: number) => {
        setPlayingIndex(index);
        if (videoRefs.current[index]) {
            videoRefs.current[index]?.play();
        }
    };

    const handleMouseLeave = (index: number) => {
        setPlayingIndex(null);
        if (videoRefs.current[index]) {
            videoRefs.current[index]?.pause();
        }
    };
   
    // 定义可以播放视频的param值
    const videoParams = ["3", "4", "5"];
    const isVideoParam = videoParams.includes(param);

    return (
        <div className='PosterBox'>
            <div className='Navigation'>
                <Navigation />
            </div>
            <Rightnav />
            <div className='PosterTop' style={{ backgroundImage: `url(${allData[param]?.bgimg})` }}>
                <div className='p_topInfo'>
                    <h1>{allData[param]?.title}</h1>
                    <p className='p_works'>共有<span>{currentData.length}</span>张作品</p>
                    <p className='p_crumbs'>
                        <a href="//ibaotu.com">包图网</a>›
                        <a href="//ibaotu.com/special/">精选专题</a>›<span>{allData[param]?.title}</span>
                    </p>
                    <div className='p_keywords'>
                        <span>推荐关键词:</span>
                        <ul className='p_keyword'>
                            {allData[param]?.keyword.map((item: any, index: number) => (
                                <li key={index} className='p_keyword_a'>
                                    <a href={item.titleurl} target="_blank" rel="noopener noreferrer">{item.titletext}</a>
                                </li>
                            ))}
                        </ul>
                    </div>
                    <div className='p_labels'>
                        <span>查看相似专题:</span>
                        <ul className='p_label'>
                            {allData[param]?.similar.map((item: any, index: number) => (
                                <li key={index}>
                                    <a href={item.similarurl} target="_blank" rel="noopener noreferrer" className='p_labels_a'>{item.similartext}</a>
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            </div>
            <div className='PosterBody'>
                <div className='PosterBody_list'>
                    {!isVideoParam ?
                        paginatedData.map((item: any, index: number) => (
                            <div className='PosterBody_list_item' key={index} style={{ position: 'relative' }}>
                                {index < 5 && <img src='https://s.ibaotu.com/next/img/new/xuan.png' className='PosterBody_list_item_xaun' />}
                                <img src={item.image} alt="" className='PosterBody_list_item_img' />
                                <div className="p_overlay">
                                    <div className="p_overlay_title">
                                        {item.name}<span>☆</span><button>版权授权</button>
                                    </div>
                                    <div className="p_overlay_button"><button>点击下载</button></div>
                                </div>
                            </div>
                        )) : paginatedData.map((item: any, index: number) => (
                            <div
                                key={index}
                                className="video-wrapper"
                                onMouseEnter={() => handleMouseEnter(index)}
                                onMouseLeave={() => handleMouseLeave(index)}
                            >
                                {playingIndex === index ? (
                                    <video
                                        ref={el => (videoRefs.current[index] = el)}
                                        controls
                                    >
                                        <source src={item.video} type="video/mp4" />
                                        Your browser does not support the video tag.
                                    </video>
                                ) : (
                                    <img
                                        src={item.image}
                                        alt="thumbnail"
                                        className="thumbnail"
                                    />
                                )}
                                {playingIndex !== index && (
                                    <div className="p_bottom_text" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, textAlign: 'center', color: 'white', backgroundColor: 'rgba(0, 0, 0, 0.5)', padding: '5px' }}>
                                        这是关于 {item.name} 的视频描述
                                    </div>
                                )}
                            </div>
                        ))
                    }
                </div>
                <PaginationComponent
                    currentPage={currentPage}
                    total={currentData.length}
                    pageSize={pageSize}
                    onPageChange={handlePageChange}
                    showSizeChanger={false}
                />
            </div>
        </div>
    );
};

export default Poster